<template>
	<view class='container'>
		<block v-if="token">
			<!-- 有商品列表 -->
			<view class="goodsList" v-if="cartList.length">
				<u-swipe-action>
					<u-swipe-action-item @click="delCheck(item)" v-for="item in cartList" :key="item.id" :options="options">
						<view class="a-goods">
							<view class='content'>
								<!-- 有库存且在售才可以讨论勾不勾选 -->
								<view class="checkbox" v-if="item.number >0 && item.is_on_sale == 1">
									<!-- 选中状态-->
									<image @click="changeCheck(item)" v-if="item.checked === 1" class="checkbox-img"
										src="/static/images/icon/gou-red.png"></image>
									<!-- 未选中状态 -->
									<image @click="changeCheck(item)" v-else class="checkbox-img" src="/static/images/icon/gou-gray.png"></image>
								</view>
								<!-- 没有库存，直接勾选灰色 -->
								<image v-else src="/images/icon/gou-gray.png" class="checkbox"></image>
								<view class="goods-info">
									<navigator class="goods-url" hover-class="none" url="">
										<view class="img-box">
											<image :src="item.list_pic_url" class="img" />
										</view>
										<view class="text-box">
											<view
												:class="item.number >0 && item.is_on_sale == 1?'goods-title':'out-stock-title'">
												{{item.goods_name}}</view>
											<view class="goods-label">{{item.goods_specifition_name_value}}</view>
											<view class="goods-price">
												<view class='price-now'>￥{{item.retail_price}}</view>
											</view>
											<!-- 购买数量计算器 -->
											<view class="selnum" v-if="item.number > 0 && item.is_on_sale == 1">
												<view class="cut" @click="changeNum('reduce',item)">-</view>
												<input value="1" :value="item.number" class="number" disabled="true"
													type="number" />
												<view class="add" @click="changeNum('add',item)">+</view>
											</view>
											<!-- 缺货描述 -->
											<view v-else class="out-stock">暂时缺货</view>
										</view>
									</navigator>
								</view>
							</view>

						</view>
					</u-swipe-action-item>
				</u-swipe-action>
			</view>
			<!-- 没有商品信息 -->
			<view class="cart-empty-container" v-else>
				<view class='cart-empty-view'>
					<image class='cart-empty' src='/static/images/icon/cart-empty.png'></image>
				</view>
				<view class='cart-empty-txt'>车里什么都没有，快去买一点吧</view>
				<view class="to-index-btn" @click="goUrl('/pages/index/index',false,true)">
					去逛逛
				</view>
			</view>
		</block>
		<!-- 没有登录 -->
		<u-empty v-else mode="permission" marginTop="150" text="您还没有登录哦"></u-empty>
		<!-- 底部区域 -->
		<view class="settle-box" v-if="cartList.length && token">
			<view class="left-price">
				<view class="all-selected">
					<!-- 选中状态 -->
					<image @click="changeCheckAll" v-if="isCheckAll" class="checkbox" src="/static/images/icon/gou-red.png"></image>
					<!-- 未选中状态 -->
					<image @click="changeCheckAll" v-else class="checkbox" src="/static/images/icon/gou-gray.png"></image>
					<view class="text">全选({{checkedGoodsCount}})
					</view>
				</view>
				<view class="total">合计：¥{{checkedGoodsAmount}}</view>
			</view>
			<view class="to-pay-btn" @click="goCheck">去结算</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex'
	import setBadge from '@/mixins/setBadge.js'
	export default {
		mixins:[setBadge],
		data() {
			return {
				options: [{
					text: "删除",
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			};
		},
		computed: {
			...mapState('user', ['token']),
			...mapGetters('cart', ['checkedGoodsAmount', 'checkedGoodsCount']),
			...mapState('cart', ['cartList']),
			// 全选状态
			isCheckAll(){
				return this.cartList.every(item=>item.checked === 1)
			}
		},
		onShow() {
			// 页面打开判断登录了就获取购车数据
			if (this.token) this.getInitData()
		},
		methods: {
			...mapActions('cart', ['getInitData']),
			// 购物车数量的变化
			async changeNum(type,row){
				if(type === 'reduce' && row.number === 1){
					// 数量是1，还要减少不允许
					return uni.showToast({
						title:'至少1个',
						icon:'error'
					})
				}
				// 将数量进行变化
				const number = type === 'add' ? row.number+1 : row.number-1
				// 发生购物车更新数量的请求
				let res = await uni.$http.post('/cart/update',{
					goodsId: row.goods_id, // 商品ID
					id: row.id, // 购物车记录id,
					productId: row.product_id, // 产品ID
					number: number // 最新数量
				})
				// 更新一下vuex里面cart里面的数据即可
				this.$store.commit('cart/setCartData',res)
			},
			// 单行数据的选中和取消
			async changeCheck(row){
				let res = await uni.$http.post('/cart/checked',{
					isChecked: row.checked  ?  0 :  1,
					productIds: row.product_id
				})
				// 更新一下vuex里面cart里面的数据即可
				this.$store.commit('cart/setCartData',res)
			},
			// 更新全部勾选状态
			async changeCheckAll(){
				let res = await uni.$http.post('/cart/checked',{
					isChecked: this.isCheckAll  ?  0 :  1,
					productIds:this.cartList.map(item=>item.product_id).join(',')
				})
				// 更新一下vuex里面cart里面的数据即可
				this.$store.commit('cart/setCartData',res)
			},
			// 删除事件
			async delCheck(row){
				// 确认提示一下
				let [err,result] = await uni.showModal({
					title:'提示',
					content:'确认删除吗？'
				})
				if(result.cancel) return
				// 发生删除请求
				let res = await uni.$http.post('/cart/delete',{
					 productIds: row.product_id
				})
				// 更新一下vuex里面cart里面的数据即可
				this.$store.commit('cart/setCartData',res)
			},
			// 跳转到确认订单界面
			goCheck(){
				// 是否勾选了
				const hasCheck = this.cartList.some(item=>item.checked === 1)
				if(!hasCheck) return uni.showToast({
					title:'请勾选',
					icon:'error'
				})
				// 跳转到确认订单界面  addType 是0 表示 是从购物车界面过去的
				uni.navigateTo({
					url:"/pkgOrder/checkout/checkout?addType=0"
				})
			}
		},
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: #fafafa;
	}

	.container {
		justify-content: initial;
		margin-bottom: 100rpx;
	}

	.cart-empty-container {
		padding-top: 240rpx;
		margin-bottom: 40rpx;
	}

	.show {
		display: block;
	}

	.cart-empty-view {
		width: 110rpx;
		height: 110rpx;
		margin: 0 auto;
	}

	.cart-empty {
		width: 110rpx;
		height: 110rpx;
	}

	.cart-empty-txt {
		width: 100%;
		text-align: center;
		color: #999;
		font-size: 28rpx;
		margin: 40rpx 0;
	}

	.to-index-btn {
		color: #fff;
		background: linear-gradient(to right, #409eff, #4ebfdb);
		border-radius: 10rpx;
		width: 400rpx;
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		font-size: 28rpx;
		margin: 0 auto;
	}

	.goodsList {
		margin-bottom: 100rpx;
	}

	.a-goods {
		width: 100%;
		height: 240rpx;
		overflow: hidden;
		position: relative;
		background: #fff;
	}

	.content {
		width: 100%;
		margin-right: 0;
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		-webkit-transform: translateX(90px);
		transform: translateX(90px);
		margin-left: -90px;
		height: 240rpx;
		overflow: hidden;
		display: flex;
		justify-content: flex-start;
	}

	.a-goods .checkbox {
		display: block;
		height: 40rpx;
		min-width: 40rpx;
		padding: 100rpx 40rpx;
	}

	.a-goods .checkbox .checkbox-img {
		height: 40rpx;
		width: 40rpx;
	}

	.goods-info {
		border-bottom: 1px solid #eee;
		width: 100%;
		padding: 30rpx 0 30rpx;
		box-sizing: border-box;
	}

	.a-goods:last-child .goods-info {
		border-bottom: none;
	}

	.goods-info .goods-url {
		width: 100%;
		height: auto;
		display: flex;
		justify-content: space-between;
	}

	.goods-info .img-box {
		width: 180rpx;
		height: 180rpx;
		overflow: hidden;
		margin-right: 20rpx;
		background-color: #fafafa;
	}

	.goods-info .text-box {
		width: 440rpx;
		position: relative;
	}

	.goods-info .text-box .goods-title {
		font-size: 30rpx;
		color: #233445;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		padding: 10rpx 20rpx 5rpx 0;
	}

	.goods-info .text-box .out-stock-title {
		font-size: 30rpx;
		color: #999;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
		padding: 10rpx 20rpx 5rpx 0;
	}

	.goods-info .text-box .goods-label {
		font-size: 26rpx;
		color: #999;
		height: 38rpx;
		line-height: 38rpx;
		margin: 8rpx 0 25rpx 0;
	}

	/* .goods-info .text-box .goods-price{

} */

	.price-now {
		display: inline-block;
		font-size: 28rpx;
		color: #ff3456;
		margin-right: 10rpx;
	}

	.price-original {
		display: inline-block;
		color: #999;
		/* height: 40rpx; */
		font-size: 26rpx;
		/* float: left; */
		/* line-height: 44rpx; */
		text-decoration: line-through;
	}

	.goods-info .text-box .buy-num {
		width: 164rpx;
		height: 52rpx;
		line-height: 47rpx;
		position: absolute;
		right: 30rpx;
		bottom: 0;
		display: flex;
		/*justify-content: space-between;*/
		border: 1px solid #ccc;
		font-size: 26rpx;
		text-align: center;
	}

	.goods-info .text-box .out-stock {
		width: 164rpx;
		height: 52rpx;
		line-height: 52rpx;
		position: absolute;
		right: 30rpx;
		bottom: 0;
		border: 1px solid #fafafa;
		font-size: 26rpx;
		text-align: center;
		background: #fafafa;
	}

	.buy-num .minus-btn {
		width: 90rpx;
		height: 100%;
		text-align: center;
		line-height: 48rpx;
		color: #555;
		border-radius: 0;
		background: #fff;
		border: none;
		padding: 0;
	}

	.buy-num .number {
		width: 100rpx;
		height: 100%;
		text-align: center;
		line-height: 52rpx;
		border-left: 1px solid #ccc;
		border-right: 1px solid #ccc;
		float: left;
		font-size: 30rpx;
	}

	.buy-num .add-btn {
		width: 90rpx;
		height: 100%;
		text-align: center;
		line-height: 48rpx;
		color: #555;
		border-radius: 0;
		background: #fff;
		border: none;
		padding: 0;
	}

	button::after {
		border-radius: 0;
		border: none;
	}

	.goods-info .text-box .selnum {
		width: 146rpx;
		height: 52rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		position: absolute;
		right: 30rpx;
		bottom: 0;
	}

	.selnum .cut {
		width: 46rpx;
		height: 46rpx;
		font-size: 30rpx;
		color: #233445;
		background: #fff;
		padding: 0;
		margin: 0;
		text-align: center;
		line-height: 40rpx;
		border-radius: 46rpx;
		border: 1rpx solid #999;
		box-sizing: border-box;
		font-weight: bold;
	}

	.selnum .add {
		width: 46rpx;
		height: 46rpx;
		font-size: 32rpx;
		color: #fff;
		padding: 0;
		margin: 0;
		text-align: center;
		line-height: 42rpx;
		background: linear-gradient(to right, #ff3456, #ff347d);
		border-radius: 46rpx;
		box-sizing: border-box;
		font-weight: bold;
	}

	.selnum .number {
		width: 52rpx;
		height: 46rpx;
		font-size: 30rpx;
		color: #233445;
		text-align: center;
		line-height: 46rpx;
	}

	.goods-info .img-box .img {
		width: 180rpx;
		height: 180rpx;
	}

	.inner {
		position: absolute;
		top: 0;
	}

	.a-goods .delete-btn {
		background-color: #ff3456;
		width: 90px;
		height: 240rpx;
		text-align: center;
		line-height: 240rpx;
		color: #fff;
		-webkit-transform: translateX(90px);
		transform: translateX(90px);
		-webkit-transition: all 0.4s;
		transition: all 0.4s;
		position: absolute;
		top: 0;
		right: 0;
		font-size: 30rpx;
	}

	.touch-move-active .content,
	.touch-move-active .delete-btn {
		-webkit-transform: translateX(0);
		transform: translateX(0);
	}

	.settle-box {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 100rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		border-bottom: 1px solid #eee;
		border-top: 1px solid #eee;
		background-color: #fff;
	}

	.settle-box .to-pay-btn {
		width: 300rpx;
		text-align: center;
		line-height: 100rpx;
		background: linear-gradient(to right, #ff3456, #ff347d);
		font-size: 32rpx;
		color: #fff;
	}

	.settle-box .to-pay-btn.no-select {
		background-color: #ccc;
	}

	.settle-box .left-price {
		display: flex;
		width: 510rpx;
		/* justify-content: space-between; */
		line-height: 100rpx;
		padding: 0 30rpx 0 0;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.settle-box .all-selected {
		padding-left: 40rpx;
		color: #000;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.settle-box .all-selected .checkbox {
		width: 40rpx;
		height: 40rpx;
		// margin-right: 20rpx;
	}

	.settle-box .total {
		color: #ff3456;
		float: left;
		margin-left: 30rpx;
	}
</style>
